<template>
    <div class="container" v-if="store.isAdded">
        <div class="add">
            <h3>事件添加</h3>
        </div>
        <div class="add-info">
            <el-form label-width="auto" style="max-width: 600px">
                <el-form-item label="事件编号:">
                    <el-input v-model.trim="store.event_id" placeholder="请输入事件编号" @blur="test" />
                </el-form-item>
                <el-form-item label="事件名称:">
                    <el-input v-model.trim="store.event_name" placeholder="请输入事件名称" @blur="test" />
                </el-form-item>
                <el-form-item label="事件等级:">
                    <el-input v-model.trim="store.event_level" placeholder="请输入事件等级" @blur="test" />
                </el-form-item>
                <el-form-item label="肇事车牌号:">
                    <el-input v-model.trim="store.event_car_num" placeholder="请输入肇事车牌号" @blur="test" />
                </el-form-item>
                <el-form-item label="肇事车主:">
                    <el-input v-model.trim="store.event_driver" placeholder="请输入肇事车主" @blur="test" />
                </el-form-item>
                <el-form-item label="肇事地区:">
                    <el-input v-model.trim="store.event_area" placeholder="请输入肇事地区" @blur="test" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addOK" :disabled="store.isTrue">确定</el-button>
                    <el-button @click=notAdd>取消</el-button>
                    <el-button @click=reset>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { mapStore } from '@/store';
import { realOK } from '../../hooks/addOKHook'
const store = mapStore()
const { addOK, notAdd } = realOK()

// const event_id = ref('')
// const event_name = ref('')
// const event_level = ref('')
// const event_carCard = ref('')
// const event_driver = ref('')


const reset = () => {
    store.event_id = ''
    store.event_name = ''
    store.event_level = ''
    store.event_car_num = ''
    store.event_driver = ''
    store.event_area = ''
}

const test = (FocusEvent) => {
    if (FocusEvent.target.value.length == 0) {
        store.isTrue = true
    } else {
        store.isTrue = false
    }
}

</script>

<style scoped lang="scss">
.container {
    position: fixed;
    top: 20%;
    left: 30%;
    z-index: 1000;
    border: solid 12px #99999979;
    border-radius: 10px;
    background: #fff;
    width: 600px;
    height: 500px;

    .add {
        height: 50px;
        background: rgba(135, 207, 235, 0.667);

        h3 {
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
    }

    .add-info {
        padding: 30px;
    }

    .el-form-item {
        margin-top: 15px;

        .el-input {
            width: 300px;
        }
    }
}
</style>
